/*
- video
    - event
        - click
            - bindEventPaly
            - bindEventPause

        - drop progress
            - bindEventrogressVolume
            - bindEventProgressCurrentime
    - 其他
        - current_time
        - whole_time
*/
const log = console.log.bind(console, '>>>')
const e = sel => document.querySelector(sel)
const rjust = function(str, size, delimeter = '0') {
    let result = str
    while (result.length < size) {
        result = delimeter + result
    }
    return result
}
const formatTime = function(sum) {
    let m = String(Math.floor(sum % 3600 / 60))
    let s = String(Math.floor(sum % 60))
    let time = `${rjust(m, 2)}:${rjust(s, 2)}`
    return time
}

const bindEventPalyOrPause = () => {
    let v = e('.tencent-video')
    e('.tencent-play').addEventListener('click', (event) => {
        if (v.paused) {
            v.play()
            e('.tencent-play').setAttribute('src', 'img/Pause.png')
        } else {
            v.pause()
            e('.tencent-play').setAttribute('src', 'img/Play.png')
        }
    })
}

const bindButton = () => {
    bindEventPalyOrPause()
}

const bindEventProgressVolume = () => {
    let input = e('.tencent-volume')
    let v = e('.tencent-video')
    input.addEventListener('change', (event) => {
        // log('change')
        v.volume = input.value

        let s = e('.tencent-speaker')
        let url = input.value == 0 ? 'img/Mute.png' : 'img/Speaker.png'
        s.setAttribute('src', url)
    })
}

const bindEventProgressTime = () => {
    let inner = e('.fill-bar')
    let dot = e('.tencent-dot')

    // 获取最外层 outer 元素的宽度, 进度条不能超过这个值
    let max = 602 * 0.97
    // 用开关来表示是否可以移动, 可以按下开关的时候才能移动
    let moving = false

    // 初始偏移量
    let offset = 0

    dot.addEventListener('mousedown', (event) => {
        // log('event', event.clientX, dot.offsetLeft, event.clientX - dot.offsetLeft)
        // event.clientX 是浏览器窗口边缘到鼠标的距离
        // dot.offsetLeft 是 dot 元素左上角到父元素左上角的距离
        // offset 就是父元素距离浏览器窗口边缘的距离, 注意这个值基本上是不变的
        offset = event.clientX - dot.offsetLeft
        // log('offset', offset)
        moving = true
    })

    document.addEventListener('mouseup', (event) => {
        moving = false
    })

    document.addEventListener('mousemove', (event) => {
        if (moving) {
            // 离浏览器左侧窗口当前距离减去父元素距离浏览器左侧窗口距离就是
            // dot 移动的距离
            let x = event.clientX - offset
            log('x', x)
            // dot 距离有一个范围, 即 0 < x < max
            if (x > max) {
                x = max
            }
            if (x < 0) {
                x = 0
            }
            let percent = x / max
            let width = percent * 100
            inner.style.width = String(width) + '%'

            dot.style.left = max * percent + 'px'
            setCurrentTime(percent)
        }
    })
}

const setDot = (percent) => {
    let dot = e('.tencent-dot')
    let max = 602 * 0.97
    dot.style.left = max * percent + 'px'
}

const setCurrentTime = (percent) => {
    // log('percent', percent)
    let v = e('.tencent-video')
    let whole = v.duration
    let c = percent * v.duration
    // log('c', c)
    v.currentTime = c
}

const bindProgress = () => {
    bindEventProgressVolume()
    bindEventProgressTime()
}

const bindTime = () => {
    let v = e('.tencent-video')
    let bar = e('.fill-bar')
    v.addEventListener('timeupdate', event => {
        let p = v.currentTime / v.duration
        bar.style.width = p * 100 + '%'

        setTime()

        if (v.ended) {
            e('.tencent-play').setAttribute('src', 'img/Play.png')
        }
    })
}

const bindEvents = () => {
    bindButton()
    bindProgress()
    bindTime()
}

const setTime = () => {
    let v = e('.tencent-video')
    let whole = v.duration
    let current = v.currentTime
    let w = formatTime(whole)
    let c = formatTime(current)
    let time = `${c}: ${w}`
    e('.tencent-time').innerHTML = time
    let percent = current / whole
    setDot(percent)
}

const __main = () => {
    bindEvents()
}
__main()
